<template>
	<view class="page">
		<template > 
			<view class="body">
				<view class="m-header m-b2"> 
					<view class="user-area">
						<view class="user-avator">
							<image v-if="token" :src="userInfo.avatar" mode="widthFix"></image>
							<image v-else src="@/static/images/avator.png" mode="widthFix"></image>
						</view>
						<view class="info">
							<template v-if="token">
								<view class="user-name-bar">
									<text class="f-s36">{{userInfo.nickname}}</text> 
								</view>	
								<view class="sub-info">
									<view class="f-grey f-s30">30个智能设备</view>
								</view>
								<!-- <view class="sub-info">
									<view class="user-lever">30个智能设备</view>
								</view> -->
							</template>
							<template v-else>
								<navigator url="/pages/login/login" hover-class="none" class="login-btn">登录</navigator>
							</template>
						</view>						 
					</view>
				</view>
				<view class="mod-wrap m-b2">
					<view class="menu-list-2">
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">智能场景</view> 
							</view>
						</navigator>  
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">米家众测</view> 
							</view>
						</navigator>
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">产品百科</view> 
							</view>
						</navigator>
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">全屋智能</view> 
							</view>
						</navigator> 
					</view>
					<view class="menu-pic-wrap"></view>
				</view>
				<view class="mod-wrap m-b2">
					<view class="menu-list">
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">共享</view>
								<view class="iconfont f-s28">&#xe8d4;</view>
							</view>
						</navigator>  
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">设备耗材</view>
								<view class="iconfont f-s28">&#xe8d4;</view>
							</view>
						</navigator>
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">语音设置</view>
								<view class="iconfont f-s28">&#xe8d4;</view>
							</view>
						</navigator>
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">小组件</view>
								<view class="iconfont f-s28">&#xe8d4;</view>
							</view>
						</navigator>
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">Watch米家</view>
								<view class="iconfont f-s28">&#xe8d4;</view>
							</view>
						</navigator>
						<navigator open-type="navigate" url="/" hover-class="none"
							class="item"> 
							<view class="icon"> </view>
							<view class="content">
								<view class="name">我的有品</view>
								<view class="iconfont f-s28">&#xe8d4;</view>
							</view>
						</navigator>
					</view> 
				</view>  
				 
				<!-- <view class="mod-wrap">
					<view class="menu-list"> 
						<view class="item" @click="logout"> 
							<view class="content">
								<view class="name">退出登录</view>
								<view class="iconfont f-s28">&#xe8d4;</view>
							</view>
						</view>
					</view>
 
				</view> -->


			</view>
			<c-nav switchTab="4"></c-nav>
 
		</template>
	</view>
</template>

<script>
	import {
		replaceStr 
	} from '@/common/util.js' 
	import { mapActions } from 'vuex'
	export default {
		name: 'demo',
		data() {
			return { 
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				token:uni.getStorageSync('token'),
				replace_phone: '', 
				flag: {
					isFullPage: false,
					isUpdateVersion: false
				}, 
				userAuth:null,
				msgCount:0
			}
		},
		async onShow() { 
			
		},
		async onLoad() {   
			// this.$store.dispatch('getUserInfo')
			// if(this.token){
			// 	this.replace_phone = replaceStr(this.userInfo.mobile, 3, '****'); 
			// } 
			
		},
		methods: {
			  

			// 拨打电话
			logout: function() { 				
				uni.showModal({
					content:'确定退出登录吗？',
					cancelText:'取消',
					confirmText:'确定',
					success(res) {
						if(res.confirm){
							uni.clearStorage();
							uni.reLaunch({
								url:'/pages/index/index' 
							})
						}
					}
				}) 
			},
			
 			showPopup: function(t, n) {
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			} 

		},

		computed:{
			userInfo_update(){  
				return this.$store.state.userInfo
			} 
		},
		watch:{
			userInfo_update(newer,older){ 
				if(newer!=older){					
					this.userInfo=uni.getStorageSync('userInfo');
					console.log('数据更新')
				}
			} 
		},
	}
</script>

<style lang="less">
	.body {
		.m-header {
			padding-top: 100rpx;
			font-size: 28rpx;
		}
	}
	.login-btn{
		color:#000;
		font-size: 30rpx;
	}
	.loading {
		text-align: center;
		padding: 40rpx 0;

		image {
			width: 36rpx;
		}
	}

	.m-header {
		position: relative;
		height: 200rpx; 

		.user-area {
			position: relative;
			display: flex;
			align-items: center;
			padding: 40rpx 4%;
		}
	}

	.top-btn-area {
		display: flex;
		position: absolute;
		top: 20rpx;
		right: 20rpx;

		.code {
			height: 56rpx;
			line-height: 56rpx;
			margin-right: 20rpx;
		}

		.setting-btn {
			width: 56rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			color: #fff;

			image {
				width: 70%;
			}
		}
	}

	.user-area {
		.user-avator {
			width: 120rpx;
			height: 120rpx;
			padding: 5rpx;
			margin-right: 20rpx;
			background: #fff;
			box-shadow: 2rpx 2rpx 5rpx #ccc;
			border-radius: 50%;

			image {
				width: 100%;
				border-radius: 50%;
			}
		}

		.info {
			width: 70%;

			.user-name-bar {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				color: #333;
				font-weight: bold;

				text {
					font-size: 30rpx;
				}
				.level{
					margin-top: 20rpx;
					image{
						width: 150rpx;
					}
				}
			}

			.sub-info {
				display: flex;
				align-items: center;
			}
			

			.tellphone {
				margin: 0 10rpx 5rpx 0;
				color: #fff;
				font-size: 22rpx;
			}

			.user-lever {
				padding: 0 8rpx;
				border: 2rpx solid #0085FF;
				background: #E1F1FF;
				border-radius: 38rpx;
				font-size: 22rpx;
				color: #0085FF;
			}
		}
		
		.right-menu{
			position: absolute;
			right:40rpx;
			top:40rpx;
			.menu-btn{
				position: relative;
				width: 50rpx;
				height: 50rpx; 
				.iconfont{
					color:#000;
				}
			}
			.msg-btn{
				.num{
					position: absolute;
					left:25rpx;
					top:-15rpx;
					min-width: 14rpx;
					text-align: center;
					height: 26rpx;
					line-height: 26rpx;
					padding:0 8rpx;
					background: #f00;
					border-radius: 36rpx;
					color:#fff;
					font-size: 18rpx;
				}
				
			}
		}

	}

	.mod-wrap {
		margin: 0 30rpx 20rpx;
		background: #fff;
		border-radius: 15rpx;
		.menu-list {}
	}

	.menu-list {
		@h: 120rpx;

		.item {
			display: flex;
			align-items: center;
			height: @h;
			padding-left: 20rpx;

			.icon {
				display: flex;
				align-items: center;
				width: 60rpx;
				height:60rpx;
				background: #ccc;
				margin-right: 20rpx;
				flex-shrink: 0;

				image {
					width: 90%;
				}
			}

			.content {
				display: flex;
				justify-content: space-between;
				height: @h;
				line-height: @h;
				padding-right: 10rpx;
				flex-grow: 2;
				border-bottom: 2rpx solid #eee;

				.iconfont {
					color: #bbb;
				}

				.name {
					flex-grow: 2;
					font-size: 32rpx;
					color: #333;
				}

				.link {
					font-size: 32rpx;
					color: #333;
				}
			}

		}
	}
	
	.menu-list-2 {
		display: flex;
		justify-content: space-between;
		padding:40rpx;
		.item { 
			.icon {
				display: flex;
				align-items: center;
				width: 60rpx;
				height:60rpx;
				margin: 0 auto 10rpx;
				background: #ccc; 
				flex-shrink: 0;
	
				image {
					width: 90%;
				}
			}
	
			.content {
				display: flex;
				justify-content: space-between;     
				.name { 
					font-size: 28rpx;
					color: #333;
				} 
			}
	
		}
	}
	.menu-pic-wrap{
		height: 220rpx;
		background: #ccc;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}

	.btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-bottom: 20rpx;
		background: #fff;
		color: #0085FF;
		font-size: 32rpx;
	}
</style>
